<template>
  <div>
    <div class="subject">
      <div class="top">
        <span class="title">{{ getnewdetailsData.title }}</span>
        <span class="time">{{ getnewdetailsData.add_time | date}}</span>
        <span class="click">阅读{{ getnewdetailsData.click }}次</span>
      </div>
      <hr style="border: 1px solid #ebedf0" />
      <div class="content" v-html="getnewdetailsData.content"></div>
    </div>

    <div>
      <van-field
        v-model="message"
        rows="2"
        autosize
        label="留言"
        type="textarea"
        maxlength="50"
        placeholder="请输入留言"
        show-word-limit
      />

      <van-button type="primary" style="width: 100%" @click="push"
        >提交评论</van-button
      >
    </div>

    <van-pull-refresh v-model="refreshing" >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ul class="comment">
          <li v-for="item in getnewcommentsData" :key="item.id">
            <div class="name">{{ item.user_name }}</div>
            <div class="content">{{ item.content }}</div>
            <div class="time">{{ item.add_time | date }}</div>
          </li>
        </ul>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getnewdetails, getnewcomments, postcomment } from "@/api/taowenApi.js";

export default {
  data() {
    return {
      message: "",
      getnewdetailsData: "",
      getnewcommentsData: [],
      pagesize: 10,
      pageindex: 1,

      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  methods: {
    async getnewdetailsAxios() {
      let { data } = await getnewdetails(this.$route.query.id);
      this.getnewdetailsData = data.message;
    },
    async getnewcommentsAxios(size,index) {
      let { data } = await getnewcomments(
        this.$route.query.id,
        size,
        index
      );
      this.getnewcommentsData.push(...data.message);
       if (data.message.length < 10) {
        this.finished = true;
      }
    },
    // onLoad上拉加载时触发的函数
    onLoad() {
    setTimeout(() => {
      if (this.loading == true) {
        this.pageindex++;
        this.getnewcommentsAxios(this.pagesize, this.pageindex);
      }

      this.loading = false;
    }, 600);
  },
    push() {
      if (this.message == "") {
        this.$toast("评论内容不能为空");
      } else {
        this.getnewcommentsData.unshift({
          user_name: "用户",
          content: this.message,
          add_time: new Date(),
        });

        postcomment(this.getnewdetailsData.id, this.message);
        this.message = "";
        this.$toast("评论成功");
      }
    },
  },
 
  created() {
    this.getnewdetailsAxios();
    this.getnewcommentsAxios(this.pagesize, this.pageindex);
  },
};
</script>

<style lang="scss" scoped>
$ui-width: 720;
$num: 15;
$baseFontSize: 50; // 750 / 15
@function px2rem($px) {
  @return $px / $baseFontSize + rem;
}

.subject {
  .top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .title {
      font-size: px2rem(24);
      font-weight: 600;
      display: inline-block;
      width: 100%;
      margin: 20px 0;
    }
    .time,
    .click {
      font-size: px2rem(14);
      color: #ccc;
    }
  }

  .content {
    font-size: px2rem(16);
  }
}

.comment {
  font-size: px2rem(16);
  li {
    border-bottom: 1px solid #e5e9ef;
    div {
      margin: 8px 0;
    }
    .name {
      color: #6d757a;
    }
    .content {
      color: #22224c;
    }
    .time {
      color: #99a2aa;
    }
  }
}
</style>